<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" class="btn" @click="add">添加角色</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="">
                <template style="width: 100%">
                  <el-row v-for="item1 in scope.row.children" :key="item1.id">
                    <el-col :span="6"
                      ><div class="grid-content bg-purple">
                        <el-tag
                          closable
                          @close="deltag(scope.row, scope.row.id, item1.id)"
                        >
                          <!-- 11111111 -->
                          {{ item1.authName }}
                        </el-tag>
                      </div></el-col
                    >
                    <el-col :span="18">
                      <div class="grid-content bg-purple-light">
                        <el-row v-for="item2 in item1.children" :key="item2.id">
                          <el-col :span="12">
                            <div class="grid-content bg-purple">
                              <el-tag
                                closable
                                type="success"
                                @close="
                                  deltag(scope.row, scope.row.id, item2.id)
                                "
                              >
                                <!-- 2222 -->
                                {{ item2.authName }}</el-tag
                              >
                            </div></el-col
                          >
                          <el-col :span="12"
                            ><div class="grid-content bg-purple-light">
                              <el-tag
                                type="warning"
                                closable
                                v-for="item3 in item2.children"
                                :key="item3.id"
                                @close="
                                  deltag(scope.row, scope.row.id, item3.id)
                                "
                              >
                                <!-- scope.row.id---角色id -->
                                <!-- item3.id-------权限id -->
                                <!-- 333333 -->
                                {{ item3.authName }}
                              </el-tag>
                            </div></el-col
                          >
                        </el-row>
                      </div></el-col
                    >
                  </el-row>
                </template>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="del(scope.row.id)"
              >删除</el-button
            >
            <el-button type="warning" @click="ck3(scope.row)" size="small"
              >修改权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹出添加 -->
    <el-dialog title="添加角色" :visible.sync="dialogVisibleadd" width="50%">
      <!-- <span>这是一段信息</span> -->
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm.roleDesc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addok('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <el-dialog title="编辑角色" :visible.sync="dialogVisibleedit" width="50%">
      <!-- <span>这是一段信息</span> -->
      <div>
        <el-form
          :model="ruleFormedit"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleFormedit.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleFormedit.roleDesc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editok('ruleForm')"
              >立即修改</el-button
            >
            <el-button @click="dialogVisibleedit = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 弹出3 -->
    <el-dialog title="提示" :visible.sync="dialogVisible3" width="40%">
      <!-- <span>这是一段信息</span> -->
      <div>
        <!-- data--数据源
          show-checkbox--显示复选框
          node-key--唯一表识
          default-expanded-keys--默认id数组--默认展开
          default-checked-keys--默认选中项数组组成的数据集合--默认选中项id
          props--默认配置项目*********
        -->
        <el-tree
          ref="treeref"
          :data="treeArr"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="ckeckArr"
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="treeok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetroleApi,
  DelquanApi,
  GetquanApi,
  treeApi,
  addroleApi,
  delroleApi,
  editroleApi
} from '@/http/api'
export default {
  name: 'rolesA',
  data() {
    return {
      tableData: [],
      dialogVisibleadd: false,
      dialogVisibleedit: false,
      dialogVisible3: false,
      // 树形控件数据源
      treeArr: [],
      // 默认配置项
      defaultProps: {
        label: 'authName',
        children: 'children'
      },
      // 默认选中数组  里面存id
      ckeckArr: [],
      // 当前角色id---treeok后
      rolesID: '',
      // 添加+----------------------
      ruleForm: {
        roleName: '',
        roleDesc: ''
      },
      // 编辑++++++++++++++
      ruleFormedit: {
        roleName: '',
        roleDesc: ''
      },
      editval: {},
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getrole()
  },
  methods: {
    // 向后台更新最新的权限
    async treeok() {
      // 获得当前角色id   √
      // 吧角色id组成字符串
      // 1、获取全选半选状态id
      const allck = this.$refs.treeref.getCheckedKeys()
      console.log(allck)
      const halck = this.$refs.treeref.getHalfCheckedKeys()
      console.log(halck)
      // 拼接 合并全选半选
      // 数组转字符串join
      const red = [...allck, ...halck].join(',')
      console.log(red)
      // 调用更新权限接口更新
      await treeApi(this.rolesID, red)
      this.dialogVisible3 = false
      // 刷新
      this.getrole()
    },
    // 获取
    async getrole() {
      const res = await GetroleApi()
      console.log('role', res)
      this.tableData = res
    },
    // 删除
    async deltag(row, roleId, rightId) {
      console.log(roleId, rightId)
      const res = await DelquanApi(roleId, rightId)
      console.log(res)
      // this.getrole()
      row.children = res
    },
    // 修改权限
    async ck3(row) {
      this.dialogVisible3 = true
      this.rolesID = row.id // 获得当前角色id
      const res = await GetquanApi('tree')
      console.log('tree', res)
      this.treeArr = res
      // 调用递归 获得所有权限组成的数组
      this.getCurrentArr(row, this.ckeckArr)
    },
    getCurrentArr(row, ckeckArr) {
      // 没有下一级，直接push 添加到ckeckArr
      if (!row.children) {
        return ckeckArr.push(row.id)
      }
      row.children.forEach((item) => {
        this.getCurrentArr(item, ckeckArr)
      })
    },
    // 添加
    add() {
      this.dialogVisibleadd = true
    },
    addok(formName) {
      this.dialogVisibleadd = false
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return false
        }
        const res = await addroleApi(this.ruleForm)
        console.log(res)
        this.getrole()
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 删除
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await delroleApi(id)
          console.log(res)
          this.getrole()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑
    edit(val) {
      this.dialogVisibleedit = true
      this.editval = val
      // 数据回填
      this.ruleFormedit.roleName = val.roleName
      this.ruleFormedit.roleDesc = val.roleDesc
    },
    async editok() {
      this.dialogVisibleedit = false
      const res = await editroleApi(this.editval.id, this.ruleFormedit)
      console.log(res)
      this.getrole()
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  float: left;
  margin-bottom: 26px;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
